import React from 'react';
import { WebView, Animated, TouchableOpacity, Image, Keyboard, ScrollView, StyleSheet, Text, View, Modal, TextInput, TouchableWithoutFeedback, DeviceEventEmitter, FlatList } from 'react-native';

import ImageViewer from 'react-native-image-zoom-viewer'

import ScreenUtils from '../Utils/ScreenUtils'
import ColorUtils from '../Utils/ColorUtils'
import RouterUtils from '../Utils/RouterUtils'
import ToastUtils from '../Utils/ToastUtils'
import StorageUtils from '../Utils/StorageUtils'
import Constant from '../Constant/Constant'
import HttpUtils from '../Utils/HttpUtils'
import RuleUtils from '../Utils/RuleUtils'
import TimeUtils from '../Utils/TimeUtils'

const options = {
    title: '请选择',
    cancelButtonTitle: '取消',
    takePhotoButtonTitle: '拍照',
    chooseFromLibraryButtonTitle: '选择相册',
    quality: 0.75,
    allowsEditing: false,
    noData: false,
    storageOptions: {
        skipBackup: true,
        path: 'images',
    },
}

export default class PageFwcjDetail extends React.Component
{
    static navigationOptions = ({navigation}) => ({
        gesturesEnabled: false,//是否支持滑动返回收拾，iOS默认支持，安卓默认关闭
        headerTitle: '排查详情',
        headerStyle: {
            backgroundColor: ColorUtils.blue,
            height: ScreenUtils.statusBarHeight,
        },
        headerRight: (<Text></Text>),
        headerTintColor: ColorUtils.white,
        headerTitleStyle: {
            fontSize: ScreenUtils.Font_18,
            color: ColorUtils.white,
            fontWeight: 'normal',
            flex: 1,
            alignSelf: 'center',
            textAlign: 'center',
        }
    });

    constructor(props)
    {
        super(props);
        this.state = {
            geoLocation: '',
            geoAddress: '',
            imgsZoomIndex: 0,
            imgsModalVisible: false,
            imgsPhotoImgs: [],
            unit: ['年', '月', '日'],
            startYear: 1960,
            endYear: 2022,
            address: '',//地  址
            buildState: '请选择',//房屋建设现状
            bulidStateId: '',//房屋建设现状Id
            buildStateArray: [{key: '0', value: '既有房屋建筑'}, {key: '1', value: '在建房屋建筑'}],//0-既有房屋建筑,1-在建房屋建筑
            ownerName: '',//产权人姓名
            idNumber: '',//身份证号
            floor: '',//建筑层数
            structureArea: '',//建筑面积
            structureData: '请选择',//建设时间
            structureType: '请选择',//结构类型
            structureTypeId: '',//结构类型Id
            structureTypeArray: [{key: '0', value: '砖石结构(预制板)'}, {key: '1', value: '砖石结构(非预制板)'}, {key: '2', value: '土木结构'}, {key: '3', value: '混凝土结构'}, {key: '4', value: '钢结构'}, {key: '5', value: '混杂结构'}, {key: '6', value: '其他'}],//'结构类型 0-砖石结构(预制板),1-砖石结构(非预制板),2-土木结构,3-混凝土结构,4-钢结构,5-混杂结构,6-其他'
            structureTypeOther: '',//结构类型其他
            structureMethod: '请选择',//建造方式,
            structureMethodId: '',//建造方式Id
            structureMethodArray: [{key: '0', value: '自行建造'}, {key: '1', value: '建筑工匠建造'}, {key: '2', value: '有资质的施工队伍建造'}, {key: '3', value: '其他'}],//建造方式 0-自行建造,1-建筑工匠建造,2-有资质的施工队伍建造,3-其他
            structureMethodOther: '',//建造方式其他,
            landStatus: '请选择',//土地性质
            landStatusId: '',//土地性质Id
            landStatusArray: [{key: '0', value: '国有土地'}, {key: '1', value: '集体土地'}],//土地性质 0-国有土地,1-集体土地',
            landProcedure: '0',//用地手续
            buildProcedure: '0',//规划建设手续
            overProcedure: '0',//竣工验收手续
            loginProcedure: '0',//房屋登记手续
            constructionPermits: '0',//施工许可证
            planningProcedure: '0',//用地规划手续
            constructionProgress: '请选择',//施工进度
            constructionProgressId: '',//土地性质Id
            constructionProgressArray: [{key: '0', value: '竣工'}, {key: '1', value: '未竣工'}],//土地性质 0-竣工,1-未竣工',
            buildOrg: '',//建设单位
            designOrg: '',//设计单位
            constructionOrg: '',//施工单位
            changeContent: '请选择',//改造内容
            changeContentId: '',//结构类型Id
            changeContentArray: [{key: '0', value: '楼顶加层'}, {key: '1', value: '周边扩建'}, {key: '2', value: '楼内夹层'}, {key: '3', value: '改变承重结构'}, {key: '4', value: '其他'}],//'改造内容 0-楼顶加层,1-周边扩建,2-楼内夹层,3-改变承重结构,4-其他'
            changeContentOther: '',//改造内容其他
            housePropertyId: '',//房屋性质Id
            houseProperty: '请选择',//
            housePropertyArray: [{key: '0', value: '纯住宅'}, {key: '1', value: '纯商用'}, {key: '2', value: '商住混用'}, {key: '3', value: '公共服务设施'}],//'房屋性质 0-纯住宅,1-纯商用,2-商住混用,3-公共服务设施'
            mainApplication: '请选择',//主要用途
            mainApplicationId: '',//主要用途Id
            mainApplicationArray: [{key: '0', value: '餐饮服务'}, {key: '1', value: '民宿宾馆'}, {key: '2', value: '批发零售'}, {key: '3', value: '医疗卫生'}, {key: '4', value: '休闲娱乐'}, {key: '4', value: '休闲娱乐'}, {key: '5', value: '生产加工'}, {key: '6', value: '仓储物流'}, {key: '7', value: '养老服务'}, {key: '8', value: '其他'}],//'主要用途 0-餐饮服务,1-民宿宾馆,2-批发零售,3-医疗卫生,4-休闲娱乐,5-生产加工,6-仓储物流,7-养老服务,8-其他'
            mainApplicationOther: '',//主要用途其他
            housePropertyProcedure: '0',//改变房屋性质手续
            whetherBusiness: '0',//是否用作经营
            businessProcedure: '0',//经营审批手续
            safetyLoophole: '0',//安全隐患初判
            riskAreas: '请选择',//风险部位
            riskAreasId: '',//风险部位
            riskAreasArray: [{key: '0', value: '墙体'}, {key: '1', value: '梁柱'}, {key: '2', value: '地基'}, {key: '3', value: '屋面 '}, {key: '4', value: '楼板'}, {key: '5', value: '其他'}],//'风险部位 0-墙体,1-梁柱,2-地基,3-屋面,4-楼板,5-其他'
            riskAreasOther: '',//风险部位其他
            uploadPics: [],
            selectItemDatas: [],
            selectType: '',

            //changeContentTag1
            changeContentTag1BgColor: ColorUtils.tagUnselectBgColor,
            changeContentTag1TxtColor: ColorUtils.tagUnselectTxtColor,
            changeContentTag1BorderColor: ColorUtils.tagUnselectBgColor,
            changeContentTag1Check: false,
            //changeContentTag2
            changeContentTag2BgColor: ColorUtils.tagUnselectBgColor,
            changeContentTag2TxtColor: ColorUtils.tagUnselectTxtColor,
            changeContentTag2BorderColor: ColorUtils.tagUnselectBgColor,
            changeContentTag2Check: false,
            //changeContentTag3
            changeContentTag3BgColor: ColorUtils.tagUnselectBgColor,
            changeContentTag3TxtColor: ColorUtils.tagUnselectTxtColor,
            changeContentTag3BorderColor: ColorUtils.tagUnselectBgColor,
            changeContentTag3Check: false,
            //changeContentTag4
            changeContentTag4BgColor: ColorUtils.tagUnselectBgColor,
            changeContentTag4TxtColor: ColorUtils.tagUnselectTxtColor,
            changeContentTag4BorderColor: ColorUtils.tagUnselectBgColor,
            changeContentTag4Check: false,
            //changeContentTag5
            changeContentTag5BgColor: ColorUtils.tagUnselectBgColor,
            changeContentTag5TxtColor: ColorUtils.tagUnselectTxtColor,
            changeContentTag5BorderColor: ColorUtils.tagUnselectBgColor,
            changeContentTag5Check: false,

            //mainApplicationTag1
            mainApplicationTag1BgColor: ColorUtils.tagUnselectBgColor,
            mainApplicationTag1TxtColor: ColorUtils.tagUnselectTxtColor,
            mainApplicationTag1BorderColor: ColorUtils.tagUnselectBgColor,
            mainApplicationTag1Check: false,
            //mainApplicationTag2
            mainApplicationTag2BgColor: ColorUtils.tagUnselectBgColor,
            mainApplicationTag2TxtColor: ColorUtils.tagUnselectTxtColor,
            mainApplicationTag2BorderColor: ColorUtils.tagUnselectBgColor,
            mainApplicationTag2Check: false,
            //mainApplicationTag3
            mainApplicationTag3BgColor: ColorUtils.tagUnselectBgColor,
            mainApplicationTag3TxtColor: ColorUtils.tagUnselectTxtColor,
            mainApplicationTag3BorderColor: ColorUtils.tagUnselectBgColor,
            mainApplicationTag3Check: false,
            //mainApplicationTag4
            mainApplicationTag4BgColor: ColorUtils.tagUnselectBgColor,
            mainApplicationTag4TxtColor: ColorUtils.tagUnselectTxtColor,
            mainApplicationTag4BorderColor: ColorUtils.tagUnselectBgColor,
            mainApplicationTag4Check: false,
            //mainApplicationTag5
            mainApplicationTag5BgColor: ColorUtils.tagUnselectBgColor,
            mainApplicationTag5TxtColor: ColorUtils.tagUnselectTxtColor,
            mainApplicationTag5BorderColor: ColorUtils.tagUnselectBgColor,
            mainApplicationTag5Check: false,
            //mainApplicationTag6
            mainApplicationTag6BgColor: ColorUtils.tagUnselectBgColor,
            mainApplicationTag6TxtColor: ColorUtils.tagUnselectTxtColor,
            mainApplicationTag6BorderColor: ColorUtils.tagUnselectBgColor,
            mainApplicationTag6Check: false,
            //mainApplicationTag7
            mainApplicationTag7BgColor: ColorUtils.tagUnselectBgColor,
            mainApplicationTag7TxtColor: ColorUtils.tagUnselectTxtColor,
            mainApplicationTag7BorderColor: ColorUtils.tagUnselectBgColor,
            mainApplicationTag7Check: false,
            //mainApplicationTag8
            mainApplicationTag8BgColor: ColorUtils.tagUnselectBgColor,
            mainApplicationTag8TxtColor: ColorUtils.tagUnselectTxtColor,
            mainApplicationTag8BorderColor: ColorUtils.tagUnselectBgColor,
            mainApplicationTag8Check: false,
            //mainApplicationTag9
            mainApplicationTag9BgColor: ColorUtils.tagUnselectBgColor,
            mainApplicationTag9TxtColor: ColorUtils.tagUnselectTxtColor,
            mainApplicationTag9BorderColor: ColorUtils.tagUnselectBgColor,
            mainApplicationTag9Check: false,

            //riskAreasTag1
            riskAreasTag1BgColor: ColorUtils.tagUnselectBgColor,
            riskAreasTag1TxtColor: ColorUtils.tagUnselectTxtColor,
            riskAreasTag1BorderColor: ColorUtils.tagUnselectBgColor,
            riskAreasTag1Check: false,
            //riskAreasTag2
            riskAreasTag2BgColor: ColorUtils.tagUnselectBgColor,
            riskAreasTag2TxtColor: ColorUtils.tagUnselectTxtColor,
            riskAreasTag2BorderColor: ColorUtils.tagUnselectBgColor,
            riskAreasTag2Check: false,
            //riskAreasTag3
            riskAreasTag3BgColor: ColorUtils.tagUnselectBgColor,
            riskAreasTag3TxtColor: ColorUtils.tagUnselectTxtColor,
            riskAreasTag3BorderColor: ColorUtils.tagUnselectBgColor,
            riskAreasTag3Check: false,
            //riskAreasTag4
            riskAreasTag4BgColor: ColorUtils.tagUnselectBgColor,
            riskAreasTag4TxtColor: ColorUtils.tagUnselectTxtColor,
            riskAreasTag4BorderColor: ColorUtils.tagUnselectBgColor,
            riskAreasTag4Check: false,
            //riskAreasTag5
            riskAreasTag5BgColor: ColorUtils.tagUnselectBgColor,
            riskAreasTag5TxtColor: ColorUtils.tagUnselectTxtColor,
            riskAreasTag5BorderColor: ColorUtils.tagUnselectBgColor,
            riskAreasTag5Check: false,
        };
    }

    componentDidMount()
    {
        RouterUtils.pushRouter('PageFwcjDetail', this.props.navigation.state.key);
        var item = this.props.navigation.state.params.item;
        console.log('item:' + JSON.stringify(item));
        this.setState({
            address: item.address,
            ownerName: item.ownerName,
            idNumber: item.idNumber,
            buildState: item.buildState,
            floor: item.floor,
            structureArea: item.structureArea,
            structureData: item.structureData,
            structureType: item.structureType,
            structureTypeOther: item.structureTypeOther,
            structureMethod: item.structureMethod,
            structureMethodOther: item.structureMethodOther,
            landStatus: item.landStatus.toString(),
            landProcedure: item.landProcedure,
            buildProcedure: item.buildProcedure,
            overProcedure: item.overProcedure,
            loginProcedure: item.loginProcedure,
            constructionPermits: item.constructionPermits,
            planningProcedure: item.planningProcedure,
            constructionProgress: item.constructionProgress,
            buildOrg: item.buildOrg,
            designOrg: item.designOrg,
            constructionOrg: item.constructionOrg,
            changeContent: item.changeContent,
            changeContentOther: item.changeContentOther,
            houseProperty: item.houseProperty,
            housePropertyProcedure: item.housePropertyProcedure,
            whetherBusiness: item.whetherBusiness,
            businessProcedure: item.businessProcedure,
            mainApplication: item.mainApplication,
            mainApplicationOther: item.mainApplicationOther,
            safetyLoophole: item.safetyLoophole,
            riskAreas: item.riskAreas,
            riskAreasOther: item.riskAreasOther,
            geoLocation: item.geo,
            geoAddress: item.collectAddress,
        })

        var pics = item.picHouse.split(',');
        for (let i = 0; i < pics.length; i++)
        {
            this.state.imgsPhotoImgs.push({'url': pics[i]});
        }
    }

    componentWillUnmount()
    {
        RouterUtils.popRouter('PageFwcjDetail', this.props.navigation.state.key);
    }

    convert(type, array)
    {
        if (type == '')
        {
            return '';
        }
        let str = '';
        let types = type.toString().split(',');
        for (let i = 0; i < types.length; i++)
        {
            let item = this.findValue(types[i], array);
            str = str + item + ',';
        }
        return str.substr(0, str.lastIndexOf(','));
    }

    findValue(type, array)
    {
        for (let i = 0; i < array.length; i++)
        {
            let item = array[i];
            if (item.key == type)
            {
                return item.value;
            }
        }
    }

    showImgsPhotoZoomerView(photoZoomerIndex, photoImgs)
    {
        this.setState({
            imgsZoomIndex: photoZoomerIndex,
            imgsModalVisible: true
        });
    }

    hideImgsPhotoZoomerView()
    {
        this.setState({
            imgsModalVisible: false
        });
    }

    renderDetailPics()
    {
        let allData = [];
        for (let i = 0; i < this.state.imgsPhotoImgs.length; i++)
        {
            let item = this.state.imgsPhotoImgs[i];
            allData.push(
                <TouchableOpacity key={item.url} onPress={() => this.showImgsPhotoZoomerView(0, this.state.imgsPhotoImgs)}>
                    <Image style={{width: 60, height: 60, borderColor: ColorUtils.line, borderWidth: 1, borderRadius: 10, marginRight: 8,}}
                           source={{uri: item.url}}/>
                </TouchableOpacity>
            );
        }
        return allData;
    }

    render()
    {
        return (
            <ScrollView style={styles.container}>
                <View style={{justifyContent: 'center', alignItems: 'center'}}>
                    <View style={{flexDirection: 'row', alignItems: 'center', paddingTop: 8, paddingBottom: 8, paddingLeft: 16, paddingRight: 16, borderBottomWidth: 1, borderBottomColor: ColorUtils.line, backgroundColor: '#cccccc'}}>
                        <Text style={{flex: 1, fontSize: ScreenUtils.Font_14, color: ColorUtils.black}}>一、基本信息</Text>
                    </View>
                    <View style={{flexDirection: 'row', alignItems: 'center', height: 58, paddingTop: 8, paddingBottom: 8, paddingLeft: 16, paddingRight: 16, borderBottomWidth: 1, borderBottomColor: ColorUtils.line}}>
                        <Text style={{flex: 1, fontSize: ScreenUtils.Font_14, color: ColorUtils.black}}>详细地址</Text>
                        <Text style={{marginRight: 8, fontSize: ScreenUtils.Font_14, color: ColorUtils.black}}>{this.state.address}</Text>
                    </View>
                    <View style={{flexDirection: 'row', alignItems: 'center', height: 58, paddingTop: 8, paddingBottom: 8, paddingLeft: 16, paddingRight: 16, borderBottomWidth: 1, borderBottomColor: ColorUtils.line}}>
                        <Text style={{flex: 1, fontSize: ScreenUtils.Font_14, color: ColorUtils.black}}>房屋建设现状</Text>
                        <Text style={{marginRight: 8, fontSize: ScreenUtils.Font_14, color: ColorUtils.black}}>{this.convert(this.state.buildState, this.state.buildStateArray)}</Text>
                    </View>
                    <View style={{flexDirection: 'row', alignItems: 'center', height: 58, paddingTop: 8, paddingBottom: 8, paddingLeft: 16, paddingRight: 16, borderBottomWidth: 1, borderBottomColor: ColorUtils.line}}>
                        <Text style={{flex: 1, fontSize: ScreenUtils.Font_14, color: ColorUtils.black}}>产权人姓名</Text>
                        <Text style={{marginRight: 8, fontSize: ScreenUtils.Font_14, color: ColorUtils.black}}>{this.state.ownerName}</Text>
                    </View>
                    <View style={{flexDirection: 'row', alignItems: 'center', height: 58, paddingTop: 8, paddingBottom: 8, paddingLeft: 16, paddingRight: 16, borderBottomWidth: 1, borderBottomColor: ColorUtils.line}}>
                        <Text style={{flex: 1, fontSize: ScreenUtils.Font_14, color: ColorUtils.black}}>身份证号</Text>
                        <Text style={{marginRight: 8, fontSize: ScreenUtils.Font_14, color: ColorUtils.black}}>{this.state.idNumber}</Text>
                    </View>
                    <View style={{flexDirection: 'row', alignItems: 'center', height: 58, paddingTop: 8, paddingBottom: 8, paddingLeft: 16, paddingRight: 16, borderBottomWidth: 1, borderBottomColor: ColorUtils.line}}>
                        <Text style={{flex: 1, fontSize: ScreenUtils.Font_14, color: ColorUtils.black}}>建筑层数</Text>
                        <Text style={{marginRight: 8, fontSize: ScreenUtils.Font_14, color: ColorUtils.black}}>{this.state.floor}</Text>
                    </View>
                    <View style={{flexDirection: 'row', alignItems: 'center', height: 58, paddingTop: 8, paddingBottom: 8, paddingLeft: 16, paddingRight: 16, borderBottomWidth: 1, borderBottomColor: ColorUtils.line}}>
                        <Text style={{flex: 1, fontSize: ScreenUtils.Font_14, color: ColorUtils.black}}>建筑面积(㎡)</Text>
                        <Text style={{marginRight: 8, fontSize: ScreenUtils.Font_14, color: ColorUtils.black}}>{this.state.structureArea}</Text>
                    </View>
                    <View style={{flexDirection: 'row', alignItems: 'center', height: 58, paddingTop: 8, paddingBottom: 8, paddingLeft: 16, paddingRight: 16, borderBottomWidth: 1, borderBottomColor: ColorUtils.line}}>
                        <Text style={{flex: 1, fontSize: ScreenUtils.Font_14, color: ColorUtils.black}}>建设时间</Text>
                        <Text style={{marginRight: 8, fontSize: ScreenUtils.Font_14, color: ColorUtils.black}}>{this.state.structureData}</Text>
                    </View>
                    <View style={{flexDirection: 'row', alignItems: 'center', height: 58, paddingTop: 8, paddingBottom: 8, paddingLeft: 16, paddingRight: 16, borderBottomWidth: 1, borderBottomColor: ColorUtils.line}}>
                        <Text style={{flex: 1, fontSize: ScreenUtils.Font_14, color: ColorUtils.black}}>结构类型</Text>
                        <Text style={{marginRight: 8, fontSize: ScreenUtils.Font_14, color: ColorUtils.black}}>{this.convert(this.state.structureType, this.state.structureTypeArray)}</Text>
                    </View>
                    <View style={{flexDirection: 'row', alignItems: 'center', height: 58, paddingTop: 8, paddingBottom: 8, paddingLeft: 16, paddingRight: 16, borderBottomWidth: 1, borderBottomColor: ColorUtils.line}}>
                        <Text style={{flex: 1, fontSize: ScreenUtils.Font_14, color: ColorUtils.black}}>其他结构类型</Text>
                        <Text style={{marginRight: 8, fontSize: ScreenUtils.Font_14, color: ColorUtils.black}}>{this.state.structureTypeOther}</Text>
                    </View>
                    <View style={{flexDirection: 'row', alignItems: 'center', height: 58, paddingTop: 8, paddingBottom: 8, paddingLeft: 16, paddingRight: 16, borderBottomWidth: 1, borderBottomColor: ColorUtils.line}}>
                        <Text style={{flex: 1, fontSize: ScreenUtils.Font_14, color: ColorUtils.black}}>建造方式</Text>
                        <Text style={{marginRight: 8, fontSize: ScreenUtils.Font_14, color: ColorUtils.black}}>{this.convert(this.state.structureMethod, this.state.structureMethodArray)}</Text>
                    </View>
                    <View style={{flexDirection: 'row', alignItems: 'center', height: 58, paddingTop: 8, paddingBottom: 8, paddingLeft: 16, paddingRight: 16, borderBottomWidth: 1, borderBottomColor: ColorUtils.line}}>
                        <Text style={{flex: 1, fontSize: ScreenUtils.Font_14, color: ColorUtils.black}}>其他建造方式</Text>
                        <Text style={{marginRight: 8, fontSize: ScreenUtils.Font_14, color: ColorUtils.black}}>{this.state.structureMethodOther}</Text>
                    </View>
                    <View style={{flexDirection: 'row', alignItems: 'center', height: 58, paddingTop: 8, paddingBottom: 8, paddingLeft: 16, paddingRight: 16, borderBottomWidth: 1, borderBottomColor: ColorUtils.line}}>
                        <Text style={{flex: 1, fontSize: ScreenUtils.Font_14, color: ColorUtils.black}}>土地性质</Text>
                        <Text style={{marginRight: 8, fontSize: ScreenUtils.Font_14, color: ColorUtils.black}}>{this.convert(this.state.landStatus, this.state.landStatusArray)}</Text>
                    </View>
                    <View style={{flexDirection: 'row', alignItems: 'center', paddingTop: 8, paddingBottom: 8, paddingLeft: 16, paddingRight: 16, borderBottomWidth: 1, borderBottomColor: ColorUtils.line, backgroundColor: '#cccccc'}}>
                        <Text style={{flex: 1, fontSize: ScreenUtils.Font_14, color: ColorUtils.black}}>二、审批手续情况</Text>
                    </View>
                    <View style={{flexDirection: 'row', alignItems: 'center', height: 58, paddingTop: 8, paddingBottom: 8, paddingLeft: 16, paddingRight: 16, borderBottomWidth: 1, borderBottomColor: ColorUtils.line}}>
                        <Text style={{flex: 1, fontSize: ScreenUtils.Font_14, color: ColorUtils.black}}>用地手续</Text>
                        <Text style={{marginRight: 8, fontSize: ScreenUtils.Font_14, color: ColorUtils.black}}>{this.state.landProcedure == '0' ? '有' : '无'}</Text>
                    </View>
                    <View style={{flexDirection: 'row', alignItems: 'center', height: 58, paddingTop: 8, paddingBottom: 8, paddingLeft: 16, paddingRight: 16, borderBottomWidth: 1, borderBottomColor: ColorUtils.line}}>
                        <Text style={{flex: 1, fontSize: ScreenUtils.Font_14, color: ColorUtils.black}}>规划建设手续</Text>
                        <Text style={{marginRight: 8, fontSize: ScreenUtils.Font_14, color: ColorUtils.black}}>{this.state.buildProcedure == '0' ? '有' : '无'}</Text>
                    </View>
                    <View style={{flexDirection: 'row', alignItems: 'center', height: 58, paddingTop: 8, paddingBottom: 8, paddingLeft: 16, paddingRight: 16, borderBottomWidth: 1, borderBottomColor: ColorUtils.line}}>
                        <Text style={{flex: 1, fontSize: ScreenUtils.Font_14, color: ColorUtils.black}}>竣工验收程序</Text>
                        <Text style={{marginRight: 8, fontSize: ScreenUtils.Font_14, color: ColorUtils.black}}>{this.state.overProcedure == '0' ? '有' : '无'}</Text>
                    </View>
                    <View style={{flexDirection: 'row', alignItems: 'center', height: 58, paddingTop: 8, paddingBottom: 8, paddingLeft: 16, paddingRight: 16, borderBottomWidth: 1, borderBottomColor: ColorUtils.line}}>
                        <Text style={{flex: 1, fontSize: ScreenUtils.Font_14, color: ColorUtils.black}}>房屋登记手续</Text>
                        <Text style={{marginRight: 8, fontSize: ScreenUtils.Font_14, color: ColorUtils.black}}>{this.state.loginProcedure == '0' ? '有' : '无'}</Text>
                    </View>
                    <View style={{flexDirection: 'row', alignItems: 'center', height: 58, paddingTop: 8, paddingBottom: 8, paddingLeft: 16, paddingRight: 16, borderBottomWidth: 1, borderBottomColor: ColorUtils.line}}>
                        <Text style={{flex: 1, fontSize: ScreenUtils.Font_14, color: ColorUtils.black}}>施工许可证</Text>
                        <Text style={{marginRight: 8, fontSize: ScreenUtils.Font_14, color: ColorUtils.black}}>{this.state.constructionPermits == '0' ? '有' : '无'}</Text>
                    </View>
                    <View style={{flexDirection: 'row', alignItems: 'center', height: 58, paddingTop: 8, paddingBottom: 8, paddingLeft: 16, paddingRight: 16, borderBottomWidth: 1, borderBottomColor: ColorUtils.line}}>
                        <Text style={{flex: 1, fontSize: ScreenUtils.Font_14, color: ColorUtils.black}}>用地规划手续</Text>
                        <Text style={{marginRight: 8, fontSize: ScreenUtils.Font_14, color: ColorUtils.black}}>{this.state.planningProcedure == '0' ? '有' : '无'}</Text>
                    </View>
                    <View style={{flexDirection: 'row', alignItems: 'center', height: 58, paddingTop: 8, paddingBottom: 8, paddingLeft: 16, paddingRight: 16, borderBottomWidth: 1, borderBottomColor: ColorUtils.line}}>
                        <Text style={{flex: 1, fontSize: ScreenUtils.Font_14, color: ColorUtils.black}}>施工进度</Text>
                        <Text style={{marginRight: 8, fontSize: ScreenUtils.Font_14, color: ColorUtils.black}}>{this.state.constructionProgress == '0' ? '有' : '无'}</Text>
                    </View>
                    <View style={{flexDirection: 'row', alignItems: 'center', height: 58, paddingTop: 8, paddingBottom: 8, paddingLeft: 16, paddingRight: 16, borderBottomWidth: 1, borderBottomColor: ColorUtils.line}}>
                        <Text style={{flex: 1, fontSize: ScreenUtils.Font_14, color: ColorUtils.black}}>建设单位</Text>
                        <Text style={{marginRight: 8, fontSize: ScreenUtils.Font_14, color: ColorUtils.black}}>{this.state.buildOrg}</Text>
                    </View>
                    <View style={{flexDirection: 'row', alignItems: 'center', height: 58, paddingTop: 8, paddingBottom: 8, paddingLeft: 16, paddingRight: 16, borderBottomWidth: 1, borderBottomColor: ColorUtils.line}}>
                        <Text style={{flex: 1, fontSize: ScreenUtils.Font_14, color: ColorUtils.black}}>设计单位</Text>
                        <Text style={{marginRight: 8, fontSize: ScreenUtils.Font_14, color: ColorUtils.black}}>{this.state.designOrg}</Text>
                    </View>
                    <View style={{flexDirection: 'row', alignItems: 'center', height: 58, paddingTop: 8, paddingBottom: 8, paddingLeft: 16, paddingRight: 16, borderBottomWidth: 1, borderBottomColor: ColorUtils.line}}>
                        <Text style={{flex: 1, fontSize: ScreenUtils.Font_14, color: ColorUtils.black}}>施工单位</Text>
                        <Text style={{marginRight: 8, fontSize: ScreenUtils.Font_14, color: ColorUtils.black}}>{this.state.constructionOrg}</Text>
                    </View>
                    <View style={{flexDirection: 'row', alignItems: 'center', paddingTop: 8, paddingBottom: 8, paddingLeft: 16, paddingRight: 16, borderBottomWidth: 1, borderBottomColor: ColorUtils.line, backgroundColor: '#cccccc'}}>
                        <Text style={{flex: 1, fontSize: ScreenUtils.Font_14, color: ColorUtils.black}}>三、改造情况</Text>
                    </View>
                    <View style={{flexDirection: 'row', alignItems: 'center', height: 58, paddingTop: 8, paddingBottom: 8, paddingLeft: 16, paddingRight: 16, borderBottomWidth: 1, borderBottomColor: ColorUtils.line}}>
                        <Text style={{flex: 1, fontSize: ScreenUtils.Font_14, color: ColorUtils.black}}>改造内容</Text>
                        <Text style={{marginRight: 8, fontSize: ScreenUtils.Font_14, color: ColorUtils.black}}>{this.convert(this.state.changeContent, this.state.changeContentArray)}</Text>
                    </View>
                    <View style={{flexDirection: 'row', alignItems: 'center', height: 58, paddingTop: 8, paddingBottom: 8, paddingLeft: 16, paddingRight: 16, borderBottomWidth: 1, borderBottomColor: ColorUtils.line}}>
                        <Text style={{flex: 1, fontSize: ScreenUtils.Font_14, color: ColorUtils.black}}>其他改造内容</Text>
                        <Text style={{marginRight: 8, fontSize: ScreenUtils.Font_14, color: ColorUtils.black}}>{this.state.changeContentOther}</Text>
                    </View>
                    <View style={{display: this.convert(this.state.buildState, this.state.buildStateArray) != '在建房屋建筑' ? 'flex' : 'none', flexDirection: 'row', alignItems: 'center', paddingTop: 8, paddingBottom: 8, paddingLeft: 16, paddingRight: 16, borderBottomWidth: 1, borderBottomColor: ColorUtils.line, backgroundColor: '#cccccc'}}>
                        <Text style={{flex: 1, fontSize: ScreenUtils.Font_14, color: ColorUtils.black}}>四、房屋性质及用途改变情况</Text>
                    </View>
                    <View style={{flexDirection: 'row', alignItems: 'center', height: 58, paddingTop: 8, paddingBottom: 8, paddingLeft: 16, paddingRight: 16, borderBottomWidth: 1, borderBottomColor: ColorUtils.line}}>
                        <Text style={{flex: 1, fontSize: ScreenUtils.Font_14, color: ColorUtils.black}}>房屋性质</Text>
                        <Text style={{marginRight: 8, fontSize: ScreenUtils.Font_14, color: ColorUtils.black}}>{this.convert(this.state.houseProperty, this.state.housePropertyArray)}</Text>
                    </View>
                    <View style={{flexDirection: 'row', alignItems: 'center', height: 58, paddingTop: 8, paddingBottom: 8, paddingLeft: 16, paddingRight: 16, borderBottomWidth: 1, borderBottomColor: ColorUtils.line}}>
                        <Text style={{flex: 1, fontSize: ScreenUtils.Font_14, color: ColorUtils.black}}>改变房屋性质手续</Text>
                        <Text style={{marginRight: 8, fontSize: ScreenUtils.Font_14, color: ColorUtils.black}}>{this.state.housePropertyProcedure == '0' ? '有' : '无'}</Text>
                    </View>
                    <View style={{flexDirection: 'row', alignItems: 'center', height: 58, paddingTop: 8, paddingBottom: 8, paddingLeft: 16, paddingRight: 16, borderBottomWidth: 1, borderBottomColor: ColorUtils.line}}>
                        <Text style={{flex: 1, fontSize: ScreenUtils.Font_14, color: ColorUtils.black}}>是否用作经营</Text>
                        <Text style={{marginRight: 8, fontSize: ScreenUtils.Font_14, color: ColorUtils.black}}>{this.state.whetherBusiness == '0' ? '有' : '无'}</Text>
                    </View>
                    <View style={{flexDirection: 'row', alignItems: 'center', height: 58, paddingTop: 8, paddingBottom: 8, paddingLeft: 16, paddingRight: 16, borderBottomWidth: 1, borderBottomColor: ColorUtils.line}}>
                        <Text style={{flex: 1, fontSize: ScreenUtils.Font_14, color: ColorUtils.black}}>经营审批手续</Text>
                        <Text style={{marginRight: 8, fontSize: ScreenUtils.Font_14, color: ColorUtils.black}}>{this.state.businessProcedure == '0' ? '有' : '无'}</Text>
                    </View>
                    <View style={{flexDirection: 'row', alignItems: 'center', height: 58, paddingTop: 8, paddingBottom: 8, paddingLeft: 16, paddingRight: 16, borderBottomWidth: 1, borderBottomColor: ColorUtils.line}}>
                        <Text style={{flex: 1, fontSize: ScreenUtils.Font_14, color: ColorUtils.black}}>主要用途</Text>
                        <Text style={{marginRight: 8, fontSize: ScreenUtils.Font_14, color: ColorUtils.black}}>{this.convert(this.state.mainApplication, this.state.mainApplicationArray)}</Text>
                    </View>
                    <View style={{flexDirection: 'row', alignItems: 'center', height: 58, paddingTop: 8, paddingBottom: 8, paddingLeft: 16, paddingRight: 16, borderBottomWidth: 1, borderBottomColor: ColorUtils.line}}>
                        <Text style={{flex: 1, fontSize: ScreenUtils.Font_14, color: ColorUtils.black}}>其他主要用途</Text>
                        <Text style={{marginRight: 8, fontSize: ScreenUtils.Font_14, color: ColorUtils.black}}>{this.state.mainApplicationOther}</Text>
                    </View>
                    <View style={{display: this.convert(this.state.buildState, this.state.buildStateArray) != '在建房屋建筑' ? 'flex' : 'none', flexDirection: 'row', alignItems: 'center', paddingTop: 8, paddingBottom: 8, paddingLeft: 16, paddingRight: 16, borderBottomWidth: 1, borderBottomColor: ColorUtils.line, backgroundColor: '#cccccc'}}>
                        <Text style={{flex: 1, fontSize: ScreenUtils.Font_14, color: ColorUtils.black}}>五、安全情况</Text>
                    </View>
                    <View style={{flexDirection: 'row', alignItems: 'center', height: 58, paddingTop: 8, paddingBottom: 8, paddingLeft: 16, paddingRight: 16, borderBottomWidth: 1, borderBottomColor: ColorUtils.line}}>
                        <Text style={{flex: 1, fontSize: ScreenUtils.Font_14, color: ColorUtils.black}}>安全隐患初判</Text>
                        <Text style={{marginRight: 8, fontSize: ScreenUtils.Font_14, color: ColorUtils.black}}>{this.state.safetyLoophole == '0' ? '基本安全' : '存在隐患'}</Text>
                    </View>
                    <View style={{flexDirection: 'row', alignItems: 'center', height: 58, paddingTop: 8, paddingBottom: 8, paddingLeft: 16, paddingRight: 16, borderBottomWidth: 1, borderBottomColor: ColorUtils.line}}>
                        <Text style={{flex: 1, fontSize: ScreenUtils.Font_14, color: ColorUtils.black}}>风险部位</Text>
                        <Text style={{marginRight: 8, fontSize: ScreenUtils.Font_14, color: ColorUtils.black}}>{this.convert(this.state.riskAreas, this.state.riskAreasArray)}</Text>
                    </View>
                    <View style={{flexDirection: 'row', alignItems: 'center', height: 58, paddingTop: 8, paddingBottom: 8, paddingLeft: 16, paddingRight: 16, borderBottomWidth: 1, borderBottomColor: ColorUtils.line}}>
                        <Text style={{flex: 1, fontSize: ScreenUtils.Font_14, color: ColorUtils.black}}>其他风险部位</Text>
                        <Text style={{marginRight: 8, fontSize: ScreenUtils.Font_14, color: ColorUtils.black}}>{this.state.riskAreasOther}</Text>
                    </View>
                    <View style={{flexDirection: 'row', alignItems: 'center', paddingTop: 8, paddingBottom: 8, paddingLeft: 16, paddingRight: 16, borderBottomWidth: 1, borderBottomColor: ColorUtils.line, backgroundColor: '#cccccc'}}>
                        <Text style={{flex: 1, fontSize: ScreenUtils.Font_14, color: ColorUtils.black}}>六、其他上传</Text>
                    </View>
                    <TouchableOpacity activeOpacity={0.8} onPress={() => this.jumpLocation()} style={{flexDirection: 'row', alignItems: 'center', height: 58, paddingTop: 8, paddingBottom: 8, paddingLeft: 16, paddingRight: 16, borderBottomWidth: 1, borderBottomColor: ColorUtils.line}}>
                        <Text style={{flex: 1, fontSize: ScreenUtils.Font_14, color: ColorUtils.black}}>采集位置</Text>
                        <Text style={{marginRight: 8, fontSize: ScreenUtils.Font_14, color: ColorUtils.black}}>{this.state.geoAddress}</Text>
                    </TouchableOpacity>
                    <View style={{flexDirection: 'row', alignItems: 'center', height: 80, paddingTop: 8, paddingBottom: 8, paddingLeft: 16, paddingRight: 16, borderBottomWidth: 1, borderBottomColor: ColorUtils.line}}>
                        <Text style={{flex: 1, fontSize: ScreenUtils.Font_14, color: ColorUtils.black}}>房屋照片</Text>
                        <View style={{flexDirection: 'row', height: 80}}>
                            <Modal visible={this.state.imgsModalVisible} transparent={true} onRequestClose={() => this.setState({imgsModalVisible: false})}>
                                <ImageViewer imageUrls={this.state.imgsPhotoImgs} enableSwipeDown={true} onSwipeDown={() =>
                                {
                                    console.log('onSwipeDown');
                                }} index={this.state.imgsZoomIndex} onClick={() => this.hideImgsPhotoZoomerView()}/>
                            </Modal>
                            <View style={{marginLeft: 8, flexDirection: 'row', alignItems: 'center',}}>
                                {this.renderDetailPics()}
                            </View>
                        </View>
                    </View>
                </View>
            </ScrollView>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: ColorUtils.white,
    },
    tabBarUnderlineStyle: {
        height: 2,
        minWidth: Math.floor(ScreenUtils.width * 0.8 / 8),
        backgroundColor: ColorUtils.blue,
    },
    tabBarTextStyle: {
        fontSize: ScreenUtils.Font_14,
        fontWeight: 'normal'
    }
});


